<template>
  <div ref="chartRef" class="ui-mode-chart"></div>
</template>
<script>
  import { defineComponent, ref, onMounted, nextTick, watch } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'Mod2',
    components: {},
    props: {
      color: {
        type: String,
        default: '',
      },
      maxNum: {
        type: [Number,String],
        default: 0,
      },
      title: {
        type: String,
        default: '',
      },
      data: {
        type: Array,
        default: [],
      },
      xData: {
        type: Array,
        default: [],
      },
    },
    setup(props) {
      const chartRef = ref()
      const initChart = (obj) => {
        let myChart = echarts.init(chartRef.value)
        let option = {
          // backgroundColor: '#05224d',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#ddd',
              },
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
              color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)',
          },
          grid: {
            top: '8%',
            left: '1%',
            right: '1%',
            bottom: '8%',
            containLabel: false,
          },
          xAxis: [
            {
              show: false,
              type: 'category',
              boundaryGap: false,
              data: props.xData,
            },
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: props.maxNum,
              splitNumber: 7,
              splitLine: {
                show: false,
              },
              axisLine: { show: false },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: '#6a9cd5',
                },
              },
              axisTick: { show: false },
            },
          ],
          series: [
            {
              name: props.title,
              type: 'line',
              smooth: true, //是否平滑曲线显示
              symbolSize: 0,

              lineStyle: {
                normal: {
                  color: `rgba(${props.color}, 1)`, // 线条颜色
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      { offset: 0, color: `rgba(${props.color}, 1)` },
                      { offset: 0.7, color: `rgba(${props.color}, .8)` },
                    ],
                    false
                  ),

                  shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: props.data,
            },
          ],
        }

        option && myChart.setOption(cloneDeep(option), true)
      }
      onMounted(() => {
        nextTick(() => {
          initChart()
        })
      })
      watch(
        () => [props.data],
        () => {
          initChart()
        },
        { deep: true }
      )
      return { chartRef }
    },
  })
</script>

<style lang="scss">
  .ui-mode-chart {
    width: 100%;
    height: 80px;
  }
</style>
